﻿<UserControl x:Class="Stopwatch.Controls.StopwatchControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="200" d:DesignWidth="378">

    <UserControl.Resources>
        <Style TargetType="TextBlock" x:Key="normalText">
            <Setter Property="FontSize" Value="120"/>
            <Setter Property="Margin" Value="0, -30, 0, 0"/>
        </Style>
        <Style TargetType="TextBlock" x:Key="normalTag">
            <Setter Property="FontSize" Value="120"/>
            <Setter Property="Margin" Value="0, -40, 0, 0"/>
        </Style>
        <Style TargetType="TextBlock" x:Key="smallText">
            <Setter Property="FontSize" Value="80"/>
            <Setter Property="Margin" Value="0, 12, 0, 0"/>
        </Style>
        <Style TargetType="TextBlock" x:Key="normalSubText">
            <Setter Property="FontSize" Value="45"/>
            <Setter Property="Margin" Value="0, -4, 0, 0"/>
        </Style>
        <Style TargetType="TextBlock" x:Key="normalSubTag">
            <Setter Property="FontSize" Value="45"/>
            <Setter Property="Margin" Value="0, -8, 0, 0"/>
        </Style>
        <Storyboard x:Name="PauseStoryboard">
            <ObjectAnimationUsingKeyFrames Duration="0:0:0.5" Storyboard.TargetProperty="UIElement.Visibility" Storyboard.TargetName="border">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" HorizontalAlignment="Center" Width="378">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="110" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid x:Name="hoursArea" Grid.Row="0" Visibility="Collapsed">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" x:Name="hours" Text="0" HorizontalAlignment="Center" />
            <TextBlock Grid.Column="1"  Text="hrs." />
        </Grid>
        <Grid x:Name="timer" Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="130"/>
                <ColumnDefinition Width="26"/>
                <ColumnDefinition Width="130"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" x:Name="minutes" Style="{StaticResource normalText}" Text="00" />
            <TextBlock Grid.Column="1" Style="{StaticResource normalTag}" Text=":" />
            <TextBlock Grid.Column="2" x:Name="seconds" Style="{StaticResource normalText}"  Text="00"/>
            <TextBlock Grid.Column="3" x:Name="milliseconds" Style="{StaticResource smallText}" Text="00"/>
        </Grid>
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="II" x:Name="pauseTag"
                           FontWeight="Bold" 
                           FontSize="28" 
                           VerticalAlignment="Top" 
                           HorizontalAlignment="Left" 
                    Visibility="Collapsed"/>
            <Grid x:Name="subTimer" Grid.Column="1" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="10"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" x:Name="subMinutes" Style="{StaticResource normalSubText}" Text="00"  VerticalAlignment="Top" />
                <TextBlock Grid.Column="1" Style="{StaticResource normalSubTag}" Text=":"  VerticalAlignment="Top"/>
                <TextBlock Grid.Column="2" x:Name="subSeconds" Style="{StaticResource normalSubText}" Text="00" VerticalAlignment="Top"/>
                <TextBlock Grid.Column="3" Style="{StaticResource normalSubTag}" Text="."  VerticalAlignment="Top"/>
                <TextBlock Grid.Column="4" x:Name="subMilliseconds" Style="{StaticResource normalSubText}" Text="00" VerticalAlignment="Top"/>
            </Grid>
        </Grid>
    </Grid>
</UserControl>
